import {
  ActionType,
  PageContainer,
  ProColumns,
  ProTable,
} from '@ant-design/pro-components';
import services from '@/services/demo';
import React, { useMemo, useRef, useState } from 'react';
import { Button } from 'antd';
import { URL_PREFIX } from '@/constants';

const { queryList } =
  services.GradeItemController;

function GradePage() {
  const [activeKey, setActiveKey] = useState<React.Key>('1');
  const actionRef = useRef<ActionType>();
  const columns: ProColumns<API.GradeItemType>[] = [
    {
      title: '学号',
      width: 100,
      dataIndex: 'gitemStuid',
      hideInForm: true,
    },
    {
      title: '姓名',
      width: 70,
      dataIndex: 'gitemStuname',
      valueType: 'text',
    },
    {
      title: '性别',
      width: 70,
      hideInSearch: true,
      dataIndex: 'gitemStusex',
      render(_, record) {
        if (record.gitemStusex === '0')
          return <span>男</span>
        else if (record.gitemStusex === '1')
          return <span>女</span>
        return ''
      }
    },
    {
      title: '学院',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemStucollege',
      valueType: 'text',
    },
    {
      title: '年级',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemStugrade',
      valueType: 'text',
    },
    {
      title: '专业',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemStuprofession',
      valueType: 'text',
    },
    {
      title: '班级',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemStuclass',
      valueType: 'text',
    },
    {
      title: '活动形式',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemAitem',
      valueType: 'text',
    },
    {
      title: '活动名称',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemAname',
      valueType: 'text',
    },
    {
      title: '活动编号',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemAid',
      valueType: 'text',
    },
    {
      title: '活动负责人',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemTeacher',
      valueType: 'text',
    },
    {
      title: '活动地址',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemAddress',
      valueType: 'text',
    },
    {
      title: '举办日期',
      width: 100,
      hideInSearch: true,
      dataIndex: 'gitemDate',
      valueType: 'text',
    },
  ];

  const GradeItemTable = () => useMemo(() => (
    <ProTable<API.GradeItemType>
      actionRef={actionRef}
      rowKey="gitemId"
      scroll={{ x: 1600 }}
      toolBarRender={() => [
        <Button key="2" type="primary">
          <a href={URL_PREFIX + '/grade-item/excel'} target="_blank">导出Excel</a>
        </Button>
      ]}
      toolbar={{
        menu: {
          type: 'tab',
          activeKey: activeKey,
          items: [
            {
              key: '1',
              label: <span>博雅读书</span>,
            },
            {
              key: '2',
              label: <span>博雅心情</span>,
            },
            {
              key: '3',
              label: <span>博雅实践</span>,
            },
            {
              key: '4',
              label: <span>博雅讲坛</span>,
            },
            {
              key: '5',
              label: <span>博雅修身</span>,
            },
            {
              key: '6',
              label: <span>博雅视野</span>,
            },
          ],
          onChange: (key) => {
            setActiveKey(key as string);
          },
        },
      }}
      search={{
        labelWidth: 120,
      }}
      request={(params: {
        current?: number;
        pageSize?: number;
      }, options?: any) => (queryList({ ...params, type: parseInt(activeKey as string) }, options))}
      columns={columns}
    />
  ), [activeKey])
  return (
    <PageContainer
      header={{
        title: '模块成绩分析',
      }}
    >
      <GradeItemTable />
    </PageContainer>
  );
}

export default GradePage;